<div class="x-picker-month" [class.x-date-picker-monthtemp]="monthTemp">
  <table class="x-picker-month-table" cellspacing="0" cellpadding="0">
    <tr *ngFor="let months of dates">
      <ng-container *ngFor="let month of months; trackBy: trackByMonth">
        <td
          [class.x-date-last-or-next]="(month | date: 'yyyy') !== (display | date: 'yyyy')"
          [class.x-date-now]="(month | date: 'yyyyMM') === (now | date: 'yyyyMM')"
          (click)="monthTemp && monthClick(month)"
        >
          <x-button
            *ngIf="!monthTemp"
            type="text"
            title="{{ month | date: 'yyyy-MM' }}"
            [activated]="(month | date: 'yyyyMM') === (model | date: 'yyyyMM')"
            (click)="monthClick(month)"
            >{{ getLocaleMonth(month) }}</x-button
          >
          <ng-container *ngIf="monthTemp">
            <ng-container *ngTemplateOutlet="monthTemp; context: { date$: month }"></ng-container>
          </ng-container>
        </td>
      </ng-container>
    </tr>
  </table>
</div>
